<template>
    <div class="annotation-detail-warp">
        <div class="ann-title">
            {{ annTitle }}
        </div>
      <div class="detail-mid">
          <div class="info">
              <span class="ann-date"> {{ formatDate }}</span>
              <span class="ann-text"> {{ annText}}</span>
          </div>
          <div class="content" v-html="content">{{ content}}</div>
      </div>
        <div class="detail-bottom">

        </div>
    </div>
</template>

<script>
    export default {
        name: "AnnotationDetail",
        props:{
            annTitle:{
                type:String,
                default:'',
                required:false
            },
            annDate:{
                type:String,
                required:false,
               default:''
           },
            annText:{
                type:String,
                default:'',
                required:false
            },
            content:{
                type:String,
                default:'',
                required:false
            },
            annReader:{
                type:String,
                default:'',
                required:false
            },
            annReadNumber:{
                type:Number,
                default:12,
                required:false
            }
        },
        computed:{
            formatDate(){
                if(!this.annDate || this.annDate.lang==0){
                    return ''
                }
                return this.annDate.substr(0,10)
            }
        }
    }
</script>

<style scoped  lang="less">
    .annotation-detail-warp{
        .ann-title {
            color: #222;
            font-size: 1.5rem;
            text-indent: 0.75em;
        }
        .detail-mid{
            .content,.info {
                color: #666;
                line-height: 1.5em;
                margin-left: 1em;
            }
            .info{
                font-size: 0.9rem;
            }
        }
       .detail-bottom{
           .read {
               color: #aaa;
           }
       }

    }
</style>